<script setup>
import { ref } from 'vue';
import axios from 'axios';
import { reactive } from 'vue';

const count = ref(0);
const rawHtml = ref('<span style="color: red">This is red</span>');
const userInfo = ref({
  name: 'John Doe',
  age: 30,
  email: 'john.doe@example.com'
});
const showButton1 = ref(false);
const userForm = ref({
  name: '',
  age: '',
  email: ''
});
let token = ref('');

function fetchUserInfo() {
  axios.post('/user/info', {
    name: userForm.value.name,
    age: Number(userForm.value.age),
    email: userForm.value.email
  })
    .then(response => {
      userInfo.value = response.data;
      // 假设后端返回的 token 在 response.data.token
      if (response.data.token) {
        token.value = response.data.token;
        localStorage.setItem('token', token.value + 'test');
      }
      console.log('User info fetched successfully:', userInfo.value);
    })
    .catch(error => {
      console.error('Error fetching user info:', error);
    });
}

// 设置 axios 请求拦截器，自动带上 token
axios.interceptors.request.use(config => {
  const localToken = localStorage.getItem('token');
  if (localToken) {
    config.headers.Authorization = `Bearer ${localToken}`;
  }
  return config;
});

const wt = ref(0)


function incrementWt() {
  wt.value++;
  return wt.value;
}

const isActive = ref(true)
const hasError = ref(true)

const ok = ref(true);

const items = ref([{ message: 'Foo' }, { message: 'Bar' }])

const name = ref('Vue.js')

function greet(event) {
  alert(`Hello ${name.value}!`)
}

const text = ref('')

</script>

<template>
  <div>
    <button @click="count++">Count is: {{ count }}</button>
    <p>Using test interpolation: {{ rawHtml }}</p>
    <p>Using v-html directive: <span v-html="rawHtml"></span></p>
    <p>{{ userInfo.name }} ({{ userInfo.age }} years old)</p>
    <p v-if="showButton1">show</p>
    <button @click="showButton1 = !showButton1">Toggle Show Button</button>
    <p>incrementWt() is: {{ wt }}</p>
    <button @click="incrementWt">Increment wt</button>
    <div class="static" :class="{ active: isActive, 'text-danger': hasError }">hello</div>
    <button @click="ok=false" v-if="ok">失效</button>
    <ul>
      <li v-for="item in items" :key="item.message">
        {{ item.message }}
      </li>
    </ul>
    <!-- `greet` 是上面定义过的方法名 -->
    <button @click="greet">Greet</button>
    <br />
    <input @input="event => text = event.target.value" placeholder="Type something..." />
    <br />
    <p>{{ text }}</p>
    <button @click="event => text = ''">Clear</button>
    <form @submit.prevent="fetchUserInfo">
      <input v-model="userForm.name" placeholder="Name" />
      <input v-model="userForm.age" placeholder="Age" type="number" />
      <input v-model="userForm.email" placeholder="Email" />
      <button type="submit">Fetch User Info</button>
    </form>
    <p>{{ userInfo }}</p>
  </div>
</template>

<style scoped>
header {
  line-height: 1.5;
}

.logo {
  display: block;
  margin: 0 auto 2rem;
}

@media (min-width: 1024px) {
  header {
    display: flex;
    place-items: center;
    padding-right: calc(var(--section-gap) / 2);
  }

  .logo {
    margin: 0 2rem 0 0;
  }

  header .wrapper {
    display: flex;
    place-items: flex-start;
    flex-wrap: wrap;
  }
}
</style>
